<template>
	<view class="home">
		<!-- 导航栏 -->
		<u-navbar :is-back="false">
			<view class="slot-wrap">
				<view class="map-wrap" @click="openChooseRegion">
					<u-icon name="map" size="32"></u-icon>
					<text class="map-wrap-text">{{region?region.name:'暂无地区'}}</text>
				</view>
			</view>
			<view slot="right">
				<view class="search-wrap">
					<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
					<u-search v-model="keyword" :show-action="false" height="56" @focus="goSearch"></u-search>
				</view>
			</view>
		</u-navbar>
		<!-- 轮播图 -->
		<u-swiper v-show="showCarousel" style="margin-top: 30rpx;" :height="280" :list="imgList" :title="false"
			@click="imgListClick"></u-swiper>
		<!-- 标签切换 -->

		<view class="tab-wrap">
			<view class="left w-full">
				<u-tabs-swiper ref="uTabs" :current="sectionIndex" @change="tabChange"
					:list="sectionList"></u-tabs-swiper>
			</view>
		</view>

		<swiper class="flex-1 w-full " :current="sectionIndex" @animationfinish="animationfinish">
			<swiper-item class="h-full" v-for="(item, index) in sectionList" :key="index">
				<scroll-view :ref="'scrollView'+index" class="h-full" :refresher-enabled="refresherList[index]"
					:refresher-triggered="triggeredList[index]" @refresherrefresh="onRefresh(index)" scroll-y
					:scroll-top="scrollTopList[index]" @scrolltolower="reachBottom(index)" @scroll="scroll">
					<!-- 有内容 -->
					<template v-if="sectionPostList[index].postList.length > 0">
						<!-- 资讯列表 -->
						<post-list v-show="postLoadStatus" :list="sectionPostList[index].postList"
							@chooseAction="chooseAction"></post-list>
						<u-loadmore :status="loadStatusList[index]"></u-loadmore>
						<view style="height: 150rpx;"></view>
					</template>
					<!-- 无内容 -->
					<template v-else>
						<u-empty text="本来无一物,何处惹尘埃" src="/static/platform/svg/winter.svg" font-size="32" icon-size="320"
							mode="list"></u-empty>
					</template>
					
				</scroll-view>
			
			</swiper-item>
		</swiper>
		<view v-if="scrollTopList[sectionIndex] > 300" class="go-top" @click="goTop">
			<u-icon name="/static/platform/icons/go_top.png" size="80"></u-icon>
		</view>

		<u-popup v-model="showAction" mode="bottom" border-radius="30">
			<view class="operation-tool">
				<view class="operation-head">
					<view class="head-title">内容反馈</view>
					<view class="head-content">
						<view class="content-item" @click="onAction">色情低俗</view>
						<view class="content-item" @click="onAction">引起不适</view>
						<view class="content-item" @click="onAction">内容有误或引战</view>
						<view class="content-item" @click="onAction">内容质量差</view>
					</view>
				</view>
				<u-gap style="margin-top: 20rpx;" height="1" bg-color="#e8e8e8"></u-gap>
				<view class="operation-buttom">
					<view class="buttom-head">
						<view class="head-title">不感兴趣</view>
					</view>
					<view class="buttom-content">
						<view class="buttom-item" @click="onAction">
							<u-icon class="item-icon" name="minus-circle" size="38"></u-icon>
							<view class="item-txt">减少此内容</view>
						</view>
						<view class="buttom-item" @click="onAction">
							<u-icon class="item-icon" name="reload" size="38"></u-icon>
							<view class="item-txt">重复推荐</view>
						</view>
						<view class="report" @click="onAction">
							<view class="left">
								<u-icon class="item-icon" name="warning" size="38"></u-icon>
								<view class="item-txt">举报</view>
							</view>
							<view class="right">
								<u-icon class="item-icon" color="#999" name="arrow-right" size="26"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="cancel" @click="showAction=false">取消</view>
			</view>
		</u-popup>

		<buttom-tabbar></buttom-tabbar>
	</view>

</template>
<script>
	import PostList from '@/pages/platform/post/post-list.vue'

	export default {
		components: {
			PostList
		},
		data() {
			return {
				keyword: '',
				imgList: [{
						image: '/static/aidex/banner/banner01.png'
					},
					{
						image: '/static/aidex/banner/banner02.png'
					},
					{
						image: '/static/aidex/banner/banner03.png'
					}
				],
				queryParam: {
					pageNo: 1,
					pageSize: 10,
					regionId: undefined,
					sectionId: undefined
				},
				region: undefined,
				sectionPostList: [],
				postList: [],
				sectionList: [],
				sectionIndex: 0,
				scrollTopList: [],
				backTopList: [],
				triggeredList: [],
				refresherList: [],
				loadStatusList: [],
				postLoadStatus: true,
				showCarousel: true,
				showAction: false,
				actionList: [{
					text: '投诉',
					subname: '辱骂攻击、广告、违法违规等',
					key: "complaint"
				}],
				choosePostId: undefined
			};
		},
		watch: {},
		onPageScroll(e) {
			this.backTopList[this.sectionIndex] = e.scrollTop;
		},
		onLoad() {
			this.init()
		},
		methods: {
			goSearch() {
				uni.navigateTo({
					url: "/pages/platform/home/search"
				})
			},
			init() {
				this.$u.api.regionData.getRegionByUser().then(res => {
					if (res.data.region) {
						this.region = res.data.region
						this.queryParam.regionId = this.region.id
					}
					this.$u.vuex('region', this.region);

					this.sectionList = res.data.sectionList
					if (this.sectionList) {
						this.sectionList.forEach(() => {
							this.sectionPostList.push({
								postList: []
							})
							this.scrollTopList.push(0)
							this.backTopList.push(0)
							this.refresherList.push(true)
							this.triggeredList.push(false)
							this.loadStatusList.push('loadmore')
						})
					}
					this.$u.vuex('sectionList', this.sectionList);
					this.getPostList()
					this.sendRegisterMessage()
				})

			},
			sendRegisterMessage() {
				let registerMessage = {
					fromId: this.vuex_user.id,
					content: undefined,
					type: 'REGISTER'
				}
				if (this.$store.state.region) {
					registerMessage.content = this.$store.state.region.id
				}

				this.$socket.setRegisterMessage(JSON.stringify(registerMessage))
				this.$socket.setHeartbeat(registerMessage.fromId)
				this.$socket.send(JSON.stringify(registerMessage))
			},
			getPostList(sectionId) {
				this.postLoadStatus = false
				this.queryParam.sectionId = sectionId
				this.$u.api.postData.list(this.queryParam).then(res => {
					this.sectionPostList[this.sectionIndex].postList = res.data.records
					this.postLoadStatus = true
					this.setLoadStatus()
				})
			},
			setLoadStatus() {
				if (this.sectionPostList[this.sectionIndex].postList.length < this.queryParam.pageSize) {
					this.loadStatusList.splice(this.sectionIndex, 1, "nomore")
				}
			},

			getNextPostList(sectionId) {
				this.queryParam.sectionId = sectionId
				this.queryParam.pageNo += 1
				this.$u.api.postData.list(this.queryParam).then(res => {
					if (res.data.records.length > 0) {
						this.sectionPostList[this.sectionIndex].postList.push(...res.data.records)

						if (res.data.records.length < this.queryParam.size) {
							this.loadStatusList.splice(this.sectionIndex, 1, "nomore")
						} else {
							this.loadStatusList.splice(this.sectionIndex, 1, "loadmore")
						}
					} else {
						setTimeout(() => {
							this.loadStatusList.splice(this.sectionIndex, 1, "nomore")
						}, 1000)

					}
				})
			},

			openChooseRegion() {
				this.navTo('/pages/platform/region/choose-region')
			},

			// scroll-view到底部加载更多
			reachBottom(index) {
				// 是否可加载
				if (this.loadStatusList[index] === 'loadmore' ||
					this.loadStatusList[index] === 'loading') {
					// 加载中
					this.loadStatusList.splice(index, 1, "loading")
					this.getNextPostList(this.sectionList[index].id)
				}
			},


			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				if (this.sectionIndex !== e.detail.current) {
					this.tabChange(e.detail.current)
					return
				}
				this.sectionIndex = e.detail.current
			},

			onRefresh(index) {
				this.triggeredList.splice(index, 1, true)
				this.resetQuery()
				this.getPostList(this.sectionList[index].id)
				setTimeout(() => {
					this.triggeredList.splice(index, 1, false);
				}, 500)

			},

			// 回到顶部
			goTop() {
				const index = this.sectionIndex
				// 解决view层不同步的问题
				this.scrollTopList.splice(index, 1, this.backTopList[index])
				this.$nextTick(function() {
					this.scrollTopList.splice(index, 1, 0)
				})
			},
			scroll(e) {
				if (e.detail.scrollTop === 0) {
					this.showCarousel = true
				} else {
					this.showCarousel = false
				}
				const index = this.sectionIndex
				this.scrollTopList.splice(index, 1, e.detail.scrollTop) // 400显示回到顶部
			},


			tabChange(index) {
				this.sectionIndex = index;
				this.resetQuery()
				this.loadStatusList.splice(this.sectionIndex, 1, "loading")
				this.getPostList(this.sectionList[index].id)
			},

			resetQuery() {
				this.queryParam.pageNo = 1
				this.loadStatusList.splice(this.sectionIndex, 1, "loadmore")
			},

			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			imgListClick(index) {
				console.log(`点击了第${index + 1}页图片`)
			},
			chooseAction(value) {
				this.showAction = true
				this.choosePostId = value
			},
			onAction(index) {
				this.showAction = false
			},

		}
	};
</script>
<style lang="scss">
	@import 'index.scss';

	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.map-wrap {
		display: flex;
		align-items: center;
		padding: 4px 6px;
		color: #000000;
		font-size: 28rpx;
		margin-left: 30rpx;
	}

	.map-wrap-text {
		width: 90%;
		padding: 0 6rpx;
		//超出一行省略号
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.search-wrap {
		margin: 0 10rpx;
		flex: 1;
	}


	.banner-box {
		padding: 0 2%;
		width: 96%;
		height: 170rpx;
		margin: 30rpx 0 30rpx;
	}

	.u-swiper-wrap {
		padding: 0 10px;
	}

	.banner-pic {
		width: 47%;
		float: left;
		display: inline-block;
		margin: 0 1.5%;
	}

	.banner-pic image {
		width: 100%;
		height: 170rpx;
		border-radius: 12rpx;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	}

	.u-mode-light-info {
		background-color: #ffffff;
		color: #666666;
		border: 1px solid #e9ecf6;
		font-size: 12px;
		padding: 2px 8px;
		position: relative;
		top: -3px;
	}

	.tab-wrap {
		position: sticky;
		top: 0;
		background-color: #ffffff;
		z-index: 999;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;

		.right {
			margin-left: auto;
			display: flex;
			align-items: center;

			.school-name {
				font-size: 28rpx;
				margin-right: 10rpx;
				font-weight: bold;
			}
		}
	}

	// 回到顶部
	.go-top {
		position: fixed;
		right: 30rpx;
		bottom: 180rpx;
		height: 80rpx;
		width: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 100%;
	}


	.operation-tool {

		.operation-head {

			.head-title {
				margin-top: 10rpx;
				padding: 20rpx;
				padding-bottom: 0;
				font-size: 14px;
				font-weight: 700;
			}

			.head-content {
				display: flex;
				flex-wrap: wrap;

				.content-item {
					display: flex;
					margin: 20rpx;
					padding: 10rpx;
					align-items: center;
					justify-content: center;
					width: calc(50% - 20px);
					background-color: #f2f4f7;
				}
			}
		}



		.operation-buttom {
			padding: 20rpx;

			.head-title {
				padding: 20rpx;
				padding-top: 10rpx;
				padding-bottom: 0;
				font-size: 14px;
				font-weight: 700;
			}

			.buttom-content {

				.buttom-item {
					display: flex;
					margin: 30rpx;


					.item-icon {}

					.item-txt {
						margin-left: 20rpx;
					}
				}

				.report {
					display: flex;

					.left {
						margin-left: 30rpx;
						display: inline-flex;
						flex: 1;

						.item-txt {
							margin-left: 20rpx;
						}
					}

					.right {}



				}

			}


		}

		.cancel {
			padding: 20rpx;
			background-color: #f2f4f7;
			font-size: 16px;
			text-align: center;
		}
	}
</style>